<template>
	<div>
		<cont-header></cont-header>
		<daohang></daohang>
		<!--轮播图-->
		<a href="#/NaiFen">
	<div class="ying-dtu">
		<a>
		<img class="ying-img ying-active" src="../assets/img/shouye/muying/mu1.png" alt=""/>
		<img class="ying-img" src="../assets/img/shouye/muying/mu3.png" alt=""/>
		<img class="ying-img" src="../assets/img/shouye/tuijian/t.png" alt=""/>
		<img class="ying-img" src="../assets/img/shouye/tuijian/lunbo.png" alt=""/>
		<img class="ying-img" src="../assets/img/shouye/meishi/mei1.png" alt=""/>
		</a>
		<div class="ying-fen">
			<span class="ying-span yspan"></span>
			<span class="yspan"></span>
			<span class="yspan"></span>
			<span class="yspan"></span>
			<span class="yspan"></span>
		</div>
	</div>
	</a>
		<!--奶粉专区-->
		<div v-for="item in 5" class="zhuanqu">
			<div class="mu-tuijian">
				<!--奶粉标题-->
				<div class="mu-renbiao">
					<span class="mu-renbiao-left"></span> 奶粉专区
					<span class="mu-renbiao-right"></span>
				</div>
				<!--大图-->
				<a href="#/NaiFen"><img class="mu-tuilun" src="../assets/img/shouye/muying/mu3.png" alt=""/></a>
				<!--小型奶粉样品-->
				<div class="mu-hong">
					<div class="mu-childHong">
						<img src="../assets/img/shouye/benzhou/9_5.png" alt=""/>
						<p class="mu-jieshao">不易脱妆口红</p>
						<p class="mu-jiage">￥59</p>
					</div>
					<div class="mu-childHong">
						<img src="../assets/img/shouye/benzhou/9_5.png" alt=""/>
						<p class="mu-jieshao">花蕊唇彩</p>
						<p class="mu-jiage">￥129</p>
					</div>
					<div class="mu-childHong mulast">
						<img src="../assets/img/shouye/benzhou/9_5.png" alt=""/>
						<p class="mu-jieshao">娇吻玉口红</p>
						<p class="mu-jiage">￥88</p>
					</div>
				</div>
			</div>
			<!--纸尿裤专区-->
			<div class="mu-tuijian">
				<!--奶粉标题-->
				<div class="mu-renbiao">
					<span class="mu-renbiao-left"></span> 纸尿裤专区
					<span class="mu-renbiao-right"></span>
				</div>
				<!--大图-->
				<img class="mu-tuilun" src="../assets/img/shouye/muying/mu5.png" alt=""/>
				<!--口红-->
				<div class="mu-hong">
					<div class="mu-childKu">
						<img src="../assets/img/shouye/muying/mu2.png" alt=""/>
						<p class="mu-jieshao">不易脱妆口红</p>
						<p class="mu-jiage">￥59</p>
					</div>
					<div class="mu-childKu">
						<img src="../assets/img/shouye/muying/mu2.png" alt=""/>
						<p class="mu-jieshao">花蕊唇彩</p>
						<p class="mu-jiage">￥129</p>
					</div>
					<div class="mu-childKu">
						<img src="../assets/img/shouye/muying/mu2.png" alt=""/>
						<p class="mu-jieshao">娇吻玉口红</p>
						<p class="mu-jiage">￥88</p>
					</div>
				</div>
				<!--底-->
			</div>
		</div>
		<!--猜你喜欢-->
		<div class="cai-tuijian">
			<!--奶粉标题-->
			<div class="cai-renbiao">
				<span class="cai-renbiao-left"></span> 
				美食专区
				<span class="cai-renbiao-right"></span>
			</div>
			<!--果汁-->
			<div v-for="aa in 3" class="cont">
			<div class="cai-danshang">
				<img src="../assets/img/shouye/meishi/mei6.png" alt=""/>
				<p class="cai-p1">会呼吸丝滑蜜粉</p>
				<p class="cai-p2">
					<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
					<span>热品</span>
				</p>
				<p class="cai-p3">￥198</p>
			</div>
			<!--坚果-->
			<div  class="cai-danshang2">
				<img src="../assets/img/shouye/meishi/mei7.png" alt=""/>
				<p class="cai-rp1">原味坚果</p>
				<p class="cai-rp2">
					<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
					<span>热品</span>
				</p>
				<p class="cai-rp3">￥198</p>
			</div>
			</div>
			<!--加载更多-->
			<p class="mu-jia">加载更多</p>
		</div>
			<cont-footer></cont-footer>
		</div>
</template>

<script>
	export default {
		methods: {
			ylun:function(){
				var yund = 0;
				setInterval(function(){
					$(".ying-img").eq(yund).fadeIn(2000).siblings(".ying-img").fadeOut(2000);
					$(".yspan").eq(yund).addClass("ying-span").siblings(".yspan").removeClass("ying-span");
					yund++;
					if (yund == 5) {
						yund = 0;
					}
				},4000);
			}
		},
		mounted:function(){
			this.ylun();
		},
		components: {
			ContHeader,
			ContFooter,
			daohang
		}
	}
	//引入组件
	import ContHeader from '@/components/ContHeader'
	import ContFooter from '@/components/ContFooter'
	import daohang from '@/components/daohang'
</script>
<style>
	/*轮播图*/
	.ying-dtu{
		width: 100%;
		height: 30rem;
		border: 0.1rem solid #FFFFFF;
		text-align: center;
		position: relative;
	}
	.ying-dtu>a{
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.ying-img{
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		display: none;
	}
	.ying-active{
		display: block;
	}
	/*分页器*/
	.ying-fen{
		width: 100%;
		height: 5rem;
		line-height: 5rem;
		position: absolute;
		bottom: 0;
	}
	.ying-fen>span{
		display: inline-block;
		width:0.8rem;
		height: 0.8rem;
		border:0.2rem solid #FFFFFF;
		border-radius: 50%;
		background:#808080;
		margin-right:1rem;
	}
	.ying-fen .ying-span{
		background: #e53e42;
	}
	/*奶粉纸尿裤专区*/
	
	.mu-tuijian {
		height: 65rem;
		width: 100%;
		background: #FFFFFF;
		margin-top: 2rem;
		border-top: 0.1rem solid lightgray;
		border-bottom: 0.1rem solid lightgray;
	}
	
	.mu-tuiBiao {
		height: 6rem;
		font-size: 3rem;
		width: 100%;
		padding-left: 2rem;
		line-height: 6rem;
	}
	
	.mu-tuiBiao>img {
		width: 3rem;
		height: 3rem;
	}
	
	.mu-tuilun {
		width: 66rem;
		height: 30rem;
		margin-left: 3rem;
	}
/*	/*
	.nailun {
		width: 100%;
		height: 100%;
		display: none;
		position: relative;
	}*/
	
	.nailun>img {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.mu-tuiActive {
		display: block;
	}
	/*口红*/
	
	.mu-hong {
		width: 100%;
		height: 25rem;
		padding: 0 2rem;
		text-align: center;
	}
	
	.mu-childHong {
		width: 22.6rem;
		height: 18rem;
		border-right: 0.01rem solid darkgray;
		float: left;
		margin-top: 2rem;
	}
	
	.mulast {
		border: none;
	}
	
	.mu-childHong>img {
		width: 14.3rem;
		height: 14rem;
		margin: 1rem 0 2rem 0;
	}
	
	.mu-childKu {
		width: 22.6rem;
		height: 18rem;
		border-right: 0.01rem solid darkgray;
		float: left;
		margin-top: 2rem;
	}
	
	.mu-childKu:last-child {
		border: none;
	}
	
	.mu-childKu>img {
		width: 11.9rem;
		height: 14rem;
		margin: 1rem 0 2rem 0;
	}
	
	.mu-jieshao {
		font-size: 2.4rem;
		margin-bottom: 0.5rem;
	}
	
	.mu-jiage {
		font-size: 2.4rem;
		color: red;
	}
	/*奶粉专区*/
	
	.mu-renbiao {
		width: 27.3rem;
		font-size: 3rem;
		height: 6.3rem;
		line-height: 6.3rem;
		margin: 1rem auto 0;
	}
	
	.mu-renbiao-left,
	.mu-renbiao-right {
		display: inline-block;
		width: 5rem;
		height: 0.08rem;
		background: #808080;
		margin-bottom: 0.9rem;
	}
	/*猜你喜欢*/
	.cai-tuijian {
		width: 100%;
		background: #FFFFFF;
		margin-top: 2rem;
		border-top: 0.1rem solid lightgray;
		border-bottom: 0.1rem solid lightgray;
		margin-bottom: 9.6rem;
	}
	.cont{
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-bottom: 2rem;
	}
	.cai-renbiao {
		width: 27.3rem;
		font-size: 3rem;
		height: 6.3rem;
		line-height: 6.3rem;
		margin: 1rem auto 0;
	}
	
	.cai-renbiao-left,
	.cai-renbiao-right {
		display: inline-block;
		width: 5rem;
		height: 0.08rem;
		background: #808080;
		margin-bottom: 0.9rem;
	}
	/*内容*/
	.cai-danshang {
		width: 33rem;
		height: 28rem;
		border: 0.01rem solid grey;
		position: relative;
	}
	
	.cai-danshang>img {
		width: 14.1rem;
		height: 14.1rem;
		position: absolute;
		left: 9rem;
		top:3rem;
	}
	.cai-p1 {
		font-size: 2.4rem;
		position: absolute;
		left: 8rem;
		bottom: 4.3rem;
	}
	
	.cai-p2>img {
		width: 4rem;
		height: 7.6rem;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.cai-p2>span {
		display: inline-block;
		width: 2.4rem;
		font-size: 2.4rem;
		position: absolute;
		left: 1rem;
		color: #FFFFFF;
	}
	.cai-p3{
		height: 2rem;
		font-size: 2.4rem;;
		position: absolute;
		right:14.1rem;
		bottom:1.4rem;
		color:red;
	}
	/*右*/	
	.cai-danshang2 {
		width: 33rem;
		height: 28rem;
		border: 0.01rem solid grey;
		position: relative;
	}
	
	.cai-danshang2>img {
		width: 22.2rem;
		height: 12.7rem;
		position: absolute;
		left: 5.8rem;
		top:4.4rem;
	}
	.cai-rp1 {
		font-size: 2.4rem;
		position: absolute;
		left:11.6rem;
		bottom: 4.3rem;
	}
	
	.cai-rp2>img {
		width: 4rem;
		height: 7.6rem;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.cai-rp2>span {
		display: inline-block;
		width: 2.4rem;
		font-size: 2.4rem;
		position: absolute;
		left: 1rem;
		color: #FFFFFF;
	}
	.cai-rp3{
		height: 2rem;
		font-size: 2.4rem;;
		position: absolute;
		right:14.1rem;
		bottom:1.4rem;
		color:red;
	}
	/*加载更多*/
	.mu-jia{
		height: 3.6rem;
		line-height: 3.6rem;
		font-size: 2.4rem;
		text-align: center;
		padding:1rem 0;
		color:#808080;
	}
</style>